<template>
  <div class="container">
    <div class="content">
      <div class="img">
        <img src="//award.xmcdn.com/yx/fe-passport/last/dist/images/new-logo-m@2x_2909eca.png" />
      </div>
      <div class="top">
        <!-- 登录 -->
        <div class="nav">
          <div @click="flag = true" :class="isActive === flag ? 'nav-left active' : 'nav-left'">验证码登录</div>
          <div @click="flag = false" :class="isActive === flag ? 'nav-right' : 'nav-right active'">密码登录</div>
        </div>
        <!-- 输入手机号 -->
        <div v-if="flag" class="phone">
          <div class="num">
            <span>+86</span>
          </div>
          <div class="input">
            <input v-model="phone" type="text" placeholder="请输入手机号">
          </div>
        </div>
        <!-- 输入密码 -->
        <div v-else>
          <div class="phone">
            <div class="num">
              <span>+86</span>
            </div>
            <div class="input">
              <input maxlength="11" v-model="phone" type="text" placeholder="请输入13700000000的手机号">
            </div>
          </div>
          <div class="phone">
            <div class="input">
              <input maxlength="6" v-model="password" type="password" placeholder="请输入6个1的密码">
            </div>
          </div>
        </div>
        <!-- 登录按钮 -->
        <button @click="handleLogin" class="btn" :class="(flag?phone.length:(phone.length && password.length)) ? 'reactive':null">
          <span>登录</span>
        </button>
        <div class="agreement">
          <div class="input" @click="handleIsAgreement" :class="isAgreement?'isAgreement':null">
            <div v-if="isAgreement"></div>
          </div>
          <span>首次登录会自动创建新账号，且代表同意</span>
          <a>《用户服务协议》</a>
          <span>和</span>
          <a>《隐私政策》</a>
        </div>
      </div>
      <!-- 底部 -->
      <div class="footer">
        <div class="title">其他登录方式</div>
        <div class="footer-img">
          <div class="left">
            <svg t="1704697416339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="8191" width="60  " height="60">
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m210.5 612.4c-11.5 1.4-44.9-52.7-44.9-52.7 0 31.3-16.2 72.2-51.1 101.8 16.9 5.2 54.9 19.2 45.9 34.4-7.3 12.3-125.6 7.9-159.8 4-34.2 3.8-152.5 8.3-159.8-4-9.1-15.2 28.9-29.2 45.8-34.4-35-29.5-51.1-70.4-51.1-101.8 0 0-33.4 54.1-44.9 52.7-5.4-0.7-12.4-29.6 9.4-99.7 10.3-33 22-60.5 40.2-105.8-3.1-116.9 45.3-215 160.4-215 113.9 0 163.3 96.1 160.4 215 18.1 45.2 29.9 72.8 40.2 105.8 21.7 70.1 14.6 99.1 9.3 99.7z"
                p-id="8192" fill="#1296db"></path>
            </svg>
          </div>
          <div class="right">
            <svg t="1704697513460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="9622" width="55" height="55">
              <path
                d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m175.684267-547.072c-9.0112-2.781867-15.2576-4.625067-10.478934-16.810667 10.24-26.333867 11.332267-49.1008 0.187734-65.314133-20.8896-30.464-77.9776-28.791467-143.428267-0.8192 0 0-20.5312 9.181867-15.274667-7.458133 10.069333-33.041067 8.533333-60.7232-7.1168-76.6976-35.498667-36.266667-129.9456 1.365333-210.926933 84.002133C240.0256 455.765333 204.8 521.386667 204.8 578.082133c0 108.544 136.328533 174.506667 269.704533 174.506667 174.830933 0 291.140267-103.68 291.140267-186.026667 0-49.7152-41.045333-77.960533-77.960533-89.634133z m-212.821334 236.765867c-106.410667 10.717867-198.2976-38.365867-205.2096-109.704534-6.912-71.304533 73.7792-137.8304 180.189867-148.565333 106.4448-10.734933 198.314667 38.3488 205.2096 109.653333 6.894933 71.338667-73.7792 137.898667-180.189867 148.616534z m5.802667-198.007467c-50.875733-13.909333-108.3904 12.6976-130.491733 59.8016-22.528 48.008533-0.733867 101.2736 50.653866 118.7328 53.248 18.005333 116.036267-9.6256 137.847467-61.3888 21.538133-50.705067-5.341867-102.8608-58.026667-117.1456z m-4.778667 76.680533c-3.720533 6.7072-11.997867 9.9328-18.466133 7.168-6.382933-2.781867-8.379733-10.274133-4.7616-16.896 3.7376-6.5536 11.6736-9.728 18.0224-7.099733 6.4512 2.491733 8.789333 10.069333 5.205333 16.827733zM441.821867 638.293333c-10.359467 17.288533-32.477867 24.8832-49.152 16.896-16.469333-7.850667-21.316267-27.989333-10.973867-44.885333 10.205867-16.7936 31.624533-24.32 48.1792-17.032533 16.759467 7.509333 22.101333 27.4944 11.946667 45.021866z m363.9296-354.816c-40.277333-46.592-99.669333-64.375467-154.487467-52.224h-0.017067c-12.680533 2.850133-20.770133 15.872-18.056533 29.098667 2.696533 13.226667 15.172267 21.7088 27.8528 18.8416 39.0144-8.618667 81.220267 4.027733 109.858133 37.12 28.586667 33.1264 36.352 78.267733 24.1152 117.845333v0.017067c-3.9936 12.9024 2.747733 26.6752 15.121067 30.839467 12.305067 4.181333 25.565867-2.884267 29.5424-15.701334v-0.136533c17.237333-55.671467 6.331733-119.125333-33.928533-165.700267z m-59.528534 67.293867c-20.992-22.1184-51.968-30.532267-80.571733-24.746667-11.707733 2.3552-19.165867 13.294933-16.622933 24.405334 2.474667 11.093333 13.994667 18.210133 25.617066 15.803733v0.017067c13.994667-2.816 29.149867 1.297067 39.424 12.066133 10.274133 10.820267 13.038933 25.582933 8.618667 38.5024h0.017067c-3.669333 10.8032 2.56 22.391467 13.909333 25.9072 11.400533 3.447467 23.586133-2.440533 27.255467-13.2608 8.994133-26.453333 3.3792-56.558933-17.646934-78.677333z"
                fill="#E6172D" p-id="9623"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import {reqToken} from '@/api/login/index'
import {useRouter} from 'vue-router'
// 标识
const isActive = ref(true)
const flag = ref(true)
// 协议的标识
const isAgreement = ref(false)
// 手机号的正则
let regPhone = /^1[3-9]\d{9}$/;
let regPassword = /^[0-9]{6}$/;
// 手机号
const phone = ref('');
// 密码
const password = ref('');


// 
let router = useRouter()

// 点击登录的回调
function handleLogin(){
  // 判断当前验证码登录
  if(flag.value){
    // 判断手机号是否为空
    if(phone.value.trim()){
      if(regPhone.test(phone.value)){
        if(isAgreement.value){ // 判断是否点击协议
          // 发请求
          // getToken(phone.value)
          ElMessage.success('请用账号密码登录!')
        }else{
          ElMessage.error('请同意协议!')
        }

      }else{
        ElMessage.error('手机号格式不正确!')
      }
    }else{
      ElMessage.error('手机号不能为空!')
    }
  }else{
    // 否则就是账号密码登录
    if(phone.value.trim() && password.value.trim()){
      if(regPhone.test(phone.value) && regPassword.test(password.value)){

        if(isAgreement.value){ // 判断是否点击协议
          // 发请求
          getToken({phone,password})

        }else{
          ElMessage.error('请同意协议!')
        }
      }else{
        ElMessage.error('账号或密码的格式不正确!')
      }
    }else{
      ElMessage.error('账号或密码不能为空!')
    }

  }
}

// 获取token的功能函数
async function getToken(data: any){
  data = {
    phone: data.phone.value,
    password: data.password.value
  }
  try {
    const result = await reqToken(data);
    if(result.code == 200){
      ElMessage.success('登陆成功!')
      setTimeout(() => {
        goHome();
      }, 1500);
      // 将token储存到本地
      localStorage.setItem('UserToken', result.data.token);
    }
  } catch (error) {
    console.log(error)
  }
}

const goHome = () => {
  // 跳转到首页
  router.push('/')
}
// 改变协议的标识的函数
function handleIsAgreement(){
  isAgreement.value = !isAgreement.value
}
</script>

<style scoped >
div {
  font-family: '华文楷体';
}

a {
  text-decoration: none;
  color: #f86442;
}

.container {
  width: 100%;
  height: 100%;
}

.content {
  padding: 1rem 1rem 0rem 1rem;
}

.img {
  width: 100%;
  height: 100%;
  line-height: 100%;
  text-align: center;
  margin-bottom: 0.4rem;
}

.img img {
  width: 60%;
  height: 100%;
}

.nav {
  width: 100%;
  height: 0.4rem;
  display: flex;
  font-size: 0.4rem;
  padding: 0.2rem;
  justify-content: space-around;
}

.nav-left,
.nav-right {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
}

.phone {
  display: flex;
  width: 100%;
  padding: 0.5rem 0rem 0.3rem 0rem;
  height: 0.6rem;
  border-bottom: 0.05rem solid #eee;
}

.num {
  font-size: 0.4rem;
  padding-right: 0.4rem;
  height: 0.6rem;
}

.num span {
  border-right: 0.01rem solid #eee;
  padding: 0rem 0.2rem 0rem 0.4rem;
  line-height: 0.6rem;
}

.input {
  height: 0.6rem;
  line-height: 0.4rem;
  vertical-align: middle;
}

input {
  height: 0.4rem;
  line-height: 0.4rem;
  border: 0;
  outline: 0;
}

.btn {
  margin-top: 0.7rem;
  width: 100%;
  height: 1rem;
  outline: 0;
  border: 0;
  border-radius: 0.7rem;
  height: 1.2rem;
  margin-bottom: 0.6rem;
}

.btn span {
  text-align: center;
  color: white;
  font-family: '华文楷体';
  font-size: 0.5rem;
}

.agreement {
  height: 1rem;
  font-size: 0.4rem;
  text-align: center;
}

.agreement .input {
  display: inline-block;
  border-radius: 50%;
  border: 0.03rem solid #999;
  margin: 0rem;
  width: 0.35rem;
  height: 0.35rem;
  vertical-align: text-bottom;
  position: relative;
}
.agreement .input div{
  width: 0.25rem;
  height: 0.25rem;
  background-color: #f86442;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.agreement span {
  height: 0.8rem;
}

/* 底部 */
.footer {
  width: 100%;
  margin-top: 4rem;
}

.footer .title {
  font-size: 0.4rem;
  text-align: center;
}

.footer-img {
  height: 1.3rem;
  display: flex;
  justify-content: space-around;
  margin-top: 0.5rem;
}

.footer-img .left,
.right {
  border-radius: 50%;
  height: 1.3rem;
  width: 1.3rem;
}



/* 动态的样式 */
.active {
  border-bottom: 0.05rem solid #f86442;
}

.reactive {
  background-color: #f86442;
}
/* 协议的动态样式 */
.isAgreement{ 
  border-color: #f86442 !important;
}
</style>